import { useParams, useSearchParams, useLocation, useNavigate } from 'react-router-dom'
const Detail = () => {
    const navigate = useNavigate()
    console.log(navigate, "history");
    //使用navigate返回上一页的三种方式
    const back = () => {
        // navigate(-1)
        navigate("/cate/a")
        // navigate("../")
    }
    //接收参数
    //1-动态路由
    const params = useParams()
    console.log(params, "接收动态路由参数");
    //2-查询字符串接收参数
    const [searchParams] = useSearchParams()
    console.log(searchParams.get("b"), "接收查询字符串参数");
    //3-location.state接收参数
    const loacl = useLocation()
    console.log(loacl.state, "接收location.state参数");
    //4-接收参数
    console.log(loacl.search, "接收location.search参数");
    console.log(loacl.pathname, "接收location.pathname参数");
    return (
        <div>
            <h1>useParams接收动态路由参数</h1>
            <h1>useSearchParams接收查询字符串参数</h1>
            <h1>useLocation接收location.state参数</h1>
            <button onClick={back}>返回</button>
        </div>
    )
}
export default Detail;